<template>
   <div style="height: 600px;">
      <!-- 动态查询 -->
      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
         <el-form-item label="题干名称">
            <el-input v-model="queryParams.stem" placeholder="请输入题干名称" clearable style="width: 220px"
               @keyup.enter="handleQuery" />
         </el-form-item>

         <el-form-item label="申请人" v-if="user.roles.roleName === '管理员'">
            <el-input v-model="queryParams.nickname" placeholder="请输入考试名称" clearable style="width: 220px"
               @keyup.enter="handleQuery" />
         </el-form-item>

         <el-form-item label="申请状态">
            <el-select v-model="queryParams.status" placeholder="账号状态" clearable style="width: 240px">
               <el-option v-for="dict in optionsStatus" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
         </el-form-item>

         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
         </el-col>
         <el-row style="margin-left: 86%;">
            <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"
               v-if="search">
               <el-button circle icon="Search" @click="toggleSearch()" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
               <el-button circle icon="Refresh" @click="refresh()" />
            </el-tooltip>
         </el-row>
      </el-row>

      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"
         :header-cell-style="{ background: '#eee', color: '#909399' }">
         <template #empty v-if="roleList.length===0">
            <el-empty description="暂无数据" style="margin-top: 10%;"/>
         </template>
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="题目修改编号" prop="id" width="110" />
         <el-table-column label="申请人" prop="tuser.nickname" :show-overflow-tooltip="true" width="90" />
         <el-table-column label="题干" prop="stem" :show-overflow-tooltip="true" width="210">
            <template #default="scope">
               <span>{{ scope.row.stem.split("/")[0] }}</span>
            </template>
         </el-table-column>
         <el-table-column label="答案" prop="answertxt" :show-overflow-tooltip="true" width="150" />
         <el-table-column label="申请原因" prop="backCause" :show-overflow-tooltip="true" width="150" />
         <el-table-column label="申请时间" prop="createTime" :show-overflow-tooltip="true" width="170" />
         <el-table-column label="审批时间" prop="updateTime" :show-overflow-tooltip="true" width="170" />
         <el-table-column label="状态" prop="status" :show-overflow-tooltip="true" width="90">
            <template #default="scope">
               <el-tag v-if="scope.row.status == 0" type="success">申请中</el-tag>
               <el-tag v-else-if="scope.row.status == 1" type="primary">已通过</el-tag>
               <el-tag v-else="scope.row.status==2" type="danger">已驳回</el-tag>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-tooltip content="删除" placement="top" v-if="scope.row.status !== 0">
                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
               </el-tooltip>
               <el-tooltip content="同意申请" placement="top"
                  v-if="user.roles.roleName === '管理员' && scope.row.status === 0">
                  <el-button link type="primary" icon="Check" @click="handleOk(scope.row)"></el-button>
               </el-tooltip>
               <el-tooltip content="驳回" placement="top" v-if="user.roles.roleName === '管理员' && scope.row.status === 0">
                  <el-button link type="primary" icon="Close" @click="handleReject(scope.row)"></el-button>
               </el-tooltip>
               <el-tooltip content="查询驳回原因" placement="top" v-if="scope.row.status === 2">
                  <el-button link type="primary" icon="View" @click="handleView(scope.row)"></el-button>
               </el-tooltip>
            </template>
         </el-table-column>
      </el-table>
   </div>
   <el-pagination background v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
      :page-sizes="[10, 15, 20, 25]" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
   <!-- 驳回原因 -->
   <el-dialog v-model="dialogVisibleBack" title="" width="430px" style="font-weight: 800;">
      <el-form style="max-width: 600px" :model="formExamination" status-icon label-width="auto" class="demo-ruleForm">
         <el-form-item label="驳回原因" style="width: 400px">
            <el-input type="textarea" v-model="form.backCause" :disabled="true" />
         </el-form-item>
      </el-form>
   </el-dialog>
</template>

<script setup>
import { getUpdateQuestionById, getAllUpdateQuestion, deleteUpdateQuestion } from '@/api/admin/updateQuestion/index.js'
import { ref, onMounted} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserStore1 } from '../../store/userStore.js'

const user = useUserStore1().userInfo;
const roleList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const multiple = ref(true);
const total = ref(0);
const dialogVisibleBack = ref(false)
const optionsStatus = [{
   value: '0',
   label: '申请中',
},
{
   value: '1',
   label: '通过',
},
{
   value: '2',
   label: '未通过',
}]
//驳回表单
let form = ref({
   id: '',
   backCause: ''
})

//动态查询
const queryParams = ref({
   pageNum: 1,
   pageSize: 10,
   userId: user.userId,
   nickname: '',
   stem: '',
   status: ''
})

//讲师查看驳回原因
function handleView(row) {
   dialogVisibleBack.value = true
   form.value.backCause = row.backCause
}
//分页
const handleSizeChange = (val) => {
   queryParams.value.pageSize = val
   getList()
}
const handleCurrentChange = (val) => {
   queryParams.value.pageNum = val
   getList()
}
onMounted(() => {
   getList();
})

/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
}
/** 查询补考列表 */
function getList() {
   loading.value = true;
   if (user.roles.roleName == '管理员') {
      getAllUpdateQuestion(queryParams.value).then(response => {
         roleList.value = response.data.obj.records;
         total.value = response.data.obj.total;
         loading.value = false;
      });
   } else {
      getUpdateQuestionById(queryParams.value).then(response => {
         roleList.value = response.data.obj.records;
         total.value = response.data.obj.total;
         loading.value = false;
      })
   }
}
/** 重置按钮操作 */
function resetQuery() {
   queryParams.value.nickname = '';
   queryParams.value.stem = '';
   queryParams.value.status = '';
   handleQuery();
}
/** 删除按钮操作 */
function handleDelete(row) {
   if (ids.value.length > 0) {
      deleteUpdateQuestion(ids.value).then(res => {
         getList()
         ElMessage.success('删除成功')
      })
   } else {
      ids.value.push(row.id)
      ElMessageBox.confirm(
         '您确认要删除该数据项?',
         '温馨提示',
         {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
         }).then(() => {
            deleteUpdateQuestion(ids.value).then(res => {
               if (res.data.code == 200) {
                  ElMessage.success('删除成功')
                  getList()
                  ids.value = []
               } else {
                  ElMessage.error(res.data.message)
               }
            })
         })
         .catch(() => {
            ElMessage({
               type: 'info',
               message: '已取消删除',
            })
         })
   }
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
   multiple.value = !selection.length;
   ids.value = []
   selection.forEach(arr => {
      ids.value.push(arr.id)
      if (arr.status == 0) {
         multiple.value = true
      }
   });
}

const props = defineProps({
   /* 是否显示检索条件 */
   showSearch: {
      type: Boolean,
      default: true,
   },
   /* 显隐列信息 */
   columns: {
      type: Array,
   },
   /* 是否显示检索图标 */
   search: {
      type: Boolean,
      default: true,
   },
   /* 显隐列类型（transfer穿梭框、checkbox复选框） */
   showColumnsType: {
      type: String,
      default: "checkbox",
   },
   /* 右外边距 */
   gutter: {
      type: Number,
      default: 10,
   },
})

const emits = defineEmits(['update:showSearch', 'queryTable']);

// 搜索
function toggleSearch() {
   if (showSearch.value == true) {
      showSearch.value = false
   } else {
      showSearch.value = true
   }
   emits("update:showSearch", !props.showSearch);
}

// 刷新
function refresh() {
   getList()
}
</script>
<style>
.avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
   border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
   width: 178px;
   height: 178px;
   text-align: center;
}

/* main-container全局样式 */
.app-container {
   padding: 20px;
}

label {
   font-weight: 700;
}
</style>